<!--
 * @Author: wuzhen
 * @Date: 2019-12-04 17:35:26
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-12-04 20:32:55
 * @Description: 折线图堆叠
 -->
<template>
  <div class="echartBox">
    <div :id="id" :style="{ height: height, width: width }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "lineStack",
  props: {
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "200px"
    },
    height: {
      type: String,
      default: "200px"
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        title: {
          top: 20,
          text: this.data.title.text || "",
          left: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        legend: {
          top: 40,
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: this.data.legend || [],
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#333"
          }
        },
        grid: {
          top: 100,
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 坐标轴两边留白策略 boolean, Array
            data: this.data.xAxis.data,
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisTick: {
              //是否显示坐标轴刻度
              show: true
            },
            axisLabel: {
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            splitLine: {
              //是否显示分隔线。默认数值轴显示，类目轴不显示
              show: true
            },
            axisTick: {
              //是否显示坐标轴刻度
              show: true
            }
          }
        ],
        series: this.data.series
      });
    }
  }
};
</script>
<style lang="less" scoped></style>
